<template>
  <div class="content-box">
    <div v-if="rankList.list && rankList.list.length">
      <heading :grade="'1'">排行榜</heading>
      <!--分组排行榜-->
      <group-slider
      :value="activeGroup"
      :list="groupList"
      :slides="8"
      @change="handleChange"
      :height="'38px'" v-if="groupList.length > 0">
      <template scope="scope">
        <p style="line-height:36px;">{{scope.groupName}}组</p>
      </template>
      </group-slider>
      <!--足球-->
      <div v-if="race_detail.matchType==3001">
        <el-table :data="rankList.list" class="rank-table">
          <el-table-column
            prop="chartNo"
            label="排名"
            width="100"
            style="text-align:center">
            <template scope="scope">
              <i class="medal gold" v-if="scope.row.chartNo==1" ></i>              
              <i v-else-if="scope.row.chartNo==2" class="medal silver"></i>
              <i v-else-if="scope.row.chartNo==3" class="medal bronze"></i>
              <span v-else class="num-rank">
                {{scope.row.chartNo}}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="userName"
            label="球队"
            width="235">
            <template scope="scope">
              <x-img class="team-logo" v-bind:src="scope.row.iconUrl" />
              <span class="team-name">{{scope.row.userName}}</span> 
            </template>
          </el-table-column>

          <el-table-column
            prop="countAll"
            label="场次"
            width="100">
          </el-table-column>

          <el-table-column
            label="胜/平/负"
            width="100">
            <template scope="scope">
                {{scope.row.countWin}} / {{scope.row.countTie}} / {{scope.row.countLost}}
            </template>
          </el-table-column>
          <el-table-column
            label="进/失"
            width="100">
            <template scope="scope">
                {{scope.row.goalIn}}/ {{scope.row.goalLost}}
            </template>
          </el-table-column>
          <el-table-column
            prop="goalDifference"
            label="净胜"
            width="100">
            <template scope="scope">
              <span v-bind:class="{red:scope.row.difference>0,green:scope.row.difference<0}">
                {{scope.row.goalDifference}}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="point"
            label="积分">
          </el-table-column>
        </el-table>
      </div>
      <!--篮球-->
      <div v-if="race_detail.matchType==3002">
        <el-table :data="rankList.list" class="rank-table">
          <el-table-column
            prop="chartNo "
            label="排名"
            width="100"
            style="text-align:center">
            <template scope="scope">
              <i class="medal gold" v-if="scope.row.chartNo ==1" ></i>              
              <i v-else-if="scope.row.chartNo ==2" class="medal silver"></i>
              <i v-else-if="scope.row.chartNo ==3" class="medal bronze"></i>
              <span v-else class="num-rank">
                {{scope.row.chartNo }}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="userName"
            label="球队"
            width="235">
            <template scope="scope">
              <x-img class="team-logo" v-bind:src="scope.row.iconUrl" />
              <span class="team-name">{{scope.row.userName}}</span> 
            </template>

          </el-table-column>
          <el-table-column
            label="胜/负/胜率"
            width="150">
            <template scope="scope">
                {{scope.row.countWin}} / {{scope.row.countLost}} / {{scope.row.winningPercentage}}%
            </template>
          </el-table-column>
          <el-table-column
            label="得分/失分/分差"
            width="180">
            <template scope="scope">
                {{scope.row.pointAvgWin}} / {{scope.row.pointAvgLost}} / {{scope.row.pointAvgDifference}}
            </template>
          </el-table-column>
          <el-table-column
            label="连胜/连负">
            <template scope="scope">
              <span v-bind:class="{red:scope.row.consecutiveWin>0,green:scope.row.consecutiveWin<0}">
                {{ Math.abs(scope.row.consecutiveWin) }} 
                <span v-if="scope.row.consecutiveWin > 0">连胜</span>
                <span v-if="scope.row.consecutiveWin < 0">连负</span>
              </span>
            </template>
          </el-table-column>
        </el-table>
      </div>
      <!--网-->
      <div v-if="race_detail.matchType==3004">
        <el-table :data="rankList.list" class="rank-table">
          <el-table-column
            prop="chartNo"
            label="排名"
            width="100"
            style="text-align:center">
            <template scope="scope">
              <i class="medal gold" v-if="scope.row.chartNo==1" ></i>              
              <i v-else-if="scope.row.chartNo==2" class="medal silver"></i>
              <i v-else-if="scope.row.chartNo==3" class="medal bronze"></i>
              <span v-else class="num-rank">
                {{scope.row.chartNo}}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="userName"
            label="姓名"
            width="235">
            <template scope="scope">
              <x-img class="team-logo" v-bind:src="scope.row.iconUrl" />
              <span class="team-name">{{scope.row.userName}}</span> 
            </template>
          </el-table-column>
          <el-table-column
            label="胜/负"
            width="100">
            <template scope="scope">
                {{scope.row.totalWin}} / {{scope.row.totalLost}}
            </template>
          </el-table-column>
          <el-table-column
            label=" 胜盘/负盘/净胜盘"
            width="100">
            <template scope="scope">
                {{scope.row.roundWin}} / {{scope.row.roundLost}} / {{scope.row.roundNet}}
            </template>
          </el-table-column>
          <el-table-column
            prop="goalDifference"
            label="胜局/负局/净胜局"
            width="100">
            <template scope="scope">
              {{scope.row.countWin}} / {{scope.row.countLost}} / {{scope.row.countNet}}
            </template>
          </el-table-column>
          <el-table-column
            prop="point"
            label="积分">
          </el-table-column>
        </el-table>
      </div>
      <!--羽，乒-->
      <div v-if="race_detail.matchType==3003 || race_detail.matchType==3005">
        <el-table :data="rankList.list" class="rank-table">
          <el-table-column
            prop="chartNo"
            label="排名"
            width="100"
            style="text-align:center">
            <template scope="scope">
              <i class="medal gold" v-if="scope.row.chartNo==1" ></i>              
              <i v-else-if="scope.row.chartNo==2" class="medal silver"></i>
              <i v-else-if="scope.row.chartNo==3" class="medal bronze"></i>
              <span v-else class="num-rank">
                {{scope.row.chartNo}}
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="userName"
            label="姓名"
            width="235">
            <template scope="scope">
              <x-img class="team-logo" v-bind:src="scope.row.iconUrl" />
              <span class="team-name">{{scope.row.userName}}</span> 
            </template>
          </el-table-column>
          <el-table-column
            label="胜/负"
            width="100">
            <template scope="scope">
                {{scope.row.totalWin}} / {{scope.row.totalLost}}
            </template>
          </el-table-column>
          <el-table-column
            label=" 胜局/负局/净胜局"
            width="100">
            <template scope="scope">
                {{scope.row.countWin}} / {{scope.row.countLost}} / {{scope.row.countNet}}
            </template>
          </el-table-column>
          <el-table-column
            prop="goalDifference"
            label="得分/失分/净胜分"
            width="100">
            <template scope="scope">
              {{scope.row.scoreWin}} / {{scope.row.scoreLost}} / {{scope.row.scoreNet}}
            </template>
          </el-table-column>
          <el-table-column
            prop="point"
            label="积分">
          </el-table-column>
        </el-table>
      </div>
      <!--分页-->
      <el-pagination
        v-bind="getPaginationProps(rankList)"
        @current-change="handleCurrentChange"
        @size-change="handleSizeChange">
      </el-pagination>
      
      <div class="btn-wrapper">
        <el-button type="primary" :disabled="!rankList.list" @click="handleExport()">导出Excel</el-button>
      </div>      
    </div>
    <placeholder v-else text="暂时还没有排行榜哦！"></placeholder>
  </div>
</template>

<script>
import api from 'api/race'
import GroupSlider from '../components/GroupSlider'
import {mapGetters} from 'vuex'
import {downloadFile, generateGroup} from 'utils'
import { pagingList } from 'utils/mixins'
export default {
  mixins: [pagingList],
  components: {
    GroupSlider
  },
  props: {
    history: { // 列表分页是否产生历史记录
      type: Boolean,
      default: false
    }
  },
  computed: {
    ...mapGetters({
      race_detail: 'race_detail',
      global: 'global'
    }),
    isGroupMatch: function () {
      return this.groupMacth.includes(Number(this.$route.query.matchformat))
    }
  },
  mounted () {
    if (this.isGroupMatch) { // 是否是杯赛
      this.query.groupType = 1
    } else {
      this.query.groupType = 0
    }
  },
  data () {
    return {
      groupMacth: [24012, 24013, 24014, 24015, 24016],
      rankList: [],
      query: this.getQuery({
        matchId: this.$route.query.id
      }),
      groupList: [],
      activeGroup: {},
      groupCount: 0
    }
  },
  watch: {
    '$route': 'getDataList'
  },
  methods: {
    getDataList (query) {
      let matchType = this.$route.query.matchtype // 赛事类型
      api.getChart(query).then((res) => {
        this.groupList = generateGroup(4)
        this.activeGroup = this.groupList[this.query.groupType - 1]
        if (matchType === '3001') { // 3001(足球)
          this.rankList = res.data.footballPage
        } else if (matchType === '3002') { // 3002(篮球)
          this.rankList = res.data.basketballPage
        } else if (matchType === '3003') { // 3003(羽毛球)
          this.rankList = res.data.badmintonPage
        } else if (matchType === '3005') { // 3005(乒乓球)
          this.rankList = res.data.pingpongPage
        } else if (matchType === '3004') { // 3004(网球)
          this.rankList = res.data.tennisPage
        }
      })
    },
    fetch (query) {
      query.page = query.page || 1
      query.rows = query.rows || 50
      this.getDataList(query)
    },
    // 下载积分榜Excel
    handleExport () {
      var url = ''
      var prefix = '/api/match/sign/exprot'
      var _this = this
      if (this.isFootBall) {
        url = prefix + '/football?matchId=' + this.$route.query.id
        downloadFile(url, '足球联赛.xls', function (blob) {
          _this.$message({
            message: '下载出错，请稍后再试',
            type: 'warning'
          })
        })
      } else {
        url = prefix + '/basketball?matchId=' + this.$route.query.id
        downloadFile(url, '篮球联赛.xls', function (blob) {
          _this.$message({
            message: '下载出错，请稍后再试',
            type: 'warning'
          })
        })
      }
    },
    handleChange (val) { // 分组积分榜
      let index = this.groupList.indexOf(val)
      if (index > -1) {
      }
      this.activeGroup = val
      this.query.groupType = this.activeGroup.id + 1
      this.fetch(this.query)
    }
  }
}
</script>

<style lang="scss" scoped>
  .no-data{
    text-align: center;
  }
  .team-logo{
    width: 32px;
    height:32px;
    display: inline-block;
    margin-top:10px;
    margin-right: 5px;
    border-radius: 50%;
  }
  .num-rank{
    width: 26px;
    height: 26px;
    color: #fff;
    font-size: 12px;
    line-height: 26px;
    background: #ccc;
    display: inline-block;
    text-align: center;
    border-radius: 3px;
  }
  .rank-table{
    .medal{
      display: inline-block;
      width:32px;
      height: 32px;
      &.gold{
        background: url('/static/images/rank/gold.svg')
      }
      &.silver{
        background: url('/static/images/rank/silver.svg')
      }
      &.bronze{
        background: url('/static/images/rank/bronze.svg')
      }
    }    
    .red{
      color:#fa4535;
    }
    .green{
      color:#08ad36;
    }
  }
  .btn-wrapper{
    text-align: center;
    margin-top: 30px;
  }
     
  .team-name{
    display: inline-block;
    max-width:180px;
    line-height:34px;
    overflow-x: hidden;
    text-overflow:ellipsis;
  }
  img {
    vertical-align: baseline;
  }
</style>
<style>
.rank-table table tr td{
  height: 60px;
  line-height: 60px;
  font-size: 12px;
} 
.rank-table table tbody tr:nth-child(2n+1){
  background: #f5f5f5;
}
</style>
